<script setup>
import { postTableData } from "@/api/table";
import FirstTitle from "@comp/FirstTitle";
import { onMounted } from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { searchDataPzzh } from "@/api/search";
import { addOrUpdatePzzh } from "@/api/addOrUpdate";

const editorRef = shallowRef();

const toolbarConfig = {};
const editorConfig = {
  placeholder: "请输入内容...",
};
const mode = ref("default");

// 加载html
const initHtml = () => {
  searchDataPzzh({ m: "疏散基地需求分析" }).then((res) => {
    const { data } = res;
    valueHtml.value = data.find((x) => x.k === "疏散基地需求分析")?.v || "";
    valueHtml10.value = data.find((x) => x.k === "疏散基地能力现状")?.v || "";
  });
};

const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};

const valueHtml = ref(
  " 按疏散基地建设标准计算，需增建疏散基地XX个。具体建设标准：大型基地，面积大于20公顷、可安置人员大于XX万人；中型基地，面积5-15公顷、可安置人员XX-XX万人；小型基地，面积2-5公顷、可安置人员小于XX万人。"
);
const city = window.globalObj.name;

const editorRef10 = shallowRef();
const valueHtml10 = ref(
  "共有疏散基地XX个，占地面积XX㎡，可接收XX人。具体情况如下："
);
const toolbarConfig10 = {};
const editorConfig10 = { placeholder: "请输入内容..." };
const mode10 = ref("default");
const handleCreated10 = (editor) => {
  editorRef10.value = editor; // 记录 editor 实例，重要！
};
// 表头单元格样式
const headerCellStyle = () => {
  return {
    backgroundColor: "#f5f7fa",
    color: "rgba(0,0,0,0.85)",
    fontSize: "14px",
    height: "54px",
  };
};
// 单元格样式
const cellStyle = () => {
  return {
    color: "rgba(0,0,0,0.65)",
    fontSize: "14px",
    lineHeight: "22px",
  };
};

const tableData = ref([]);

// 合计占2单元格
const spanMethod = ({ row, column, rowIndex, columnIndex, length }) => {
  if (columnIndex === 0) {
    if (rowIndex === length - 1 && row.jd_name === "合计") {
      return {
        display: "none",
      };
    }
  } else if (columnIndex === 1) {
    return row.jd_name === "合计" ? [1, 2] : [1, 1];
  }
};
const handerMethodSd = ({ row, column, rowIndex, columnIndex }) => {
  nextTick(() => {
    const dom = document.querySelector(`.${column.id}`);
    if (columnIndex === 1) {
      dom.setAttribute("colspan", 2);
      dom.innerHTML = column.label;
    }
    if (columnIndex === 2) {
      dom.setAttribute("colspan", 0);
      dom.style.display = "none";
    }
  });
  return {};
};

// 疏散基地建设情况统计表
const jsqkList = ref([]);
const getJsqkData = () => {
  return postTableData({
    docType: "spaceToWar",
    method: "shusanjidiqinguangtongji",
  }).then((res) => {
    if (res.code === 200) {
      jsqkList.value = res?.data || [];
    }
  });
};

const saveProgramme = () => {
  ElMessageBox.confirm(`确定要保存吗?`, "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    customClass: "message-box",
  }).then(() => {
    addOrUpdatePzzh({
      m: "疏散基地需求分析",
      data: [
        {
          k: "疏散基地需求分析",
          v: valueHtml.value,
        },
        {
          k: "疏散基地能力现状",
          v: valueHtml10.value,
        },
      ],
    })
      .then(() => {
        ElMessage.success("操作成功");
      })
      .catch(() => {});
  });
};

onMounted(async () => {
  await initHtml();
  await getJsqkData();
});

onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (!editor) return;
  editor.destroy();
  if (editorRef10.value) editorRef10.value.destroy();
});
</script>
<template>
  <div>
    <FirstTitle name="能力现状" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef10"
        :defaultConfig="toolbarConfig10"
        :mode="mode10"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml10"
        :defaultConfig="editorConfig10"
        :mode="mode10"
        @onCreated="handleCreated10"
      />
    </div>
    <div class="top-15 text-center">{{ city }}疏散基地建设情况统计表</div>
    <el-table
      :data="jsqkList"
      class="top-15"
      style="width: 100%"
      :span-method="
        ({ row, column, rowIndex, columnIndex }) =>
          spanMethod({
            row,
            column,
            rowIndex,
            columnIndex,
            length: jsqkList.length,
          })
      "
      :header-cell-style="handerMethodSd"
      border
    >
      <el-table-column prop="rowNum" label="序号" width="70" align="center" />
      <el-table-column prop="jd_name" label="行政区划" align="center" />
      <el-table-column prop="name" label="基地名称" align="center" />
      <el-table-column prop="an" label="地址" align="center" />
      <el-table-column prop="area" label="使用面积（㎡）" align="center" />
      <el-table-column prop="jzhu_area" label="建筑面积（㎡）" align="center" />
      <el-table-column
        prop="accept_population"
        label="可安置人员（人）"
        align="center"
      />
    </el-table>

    <FirstTitle name="需求分析" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
      />
    </div>

    <div class="flex-justify-end top-20">
      <el-button type="primary" class="save-btn" @click="saveProgramme"
        >保存</el-button
      >
    </div>
  </div>
</template>
<style scoped lang="scss"></style>